<template>
  <div class="shop">
    <my-head title="分类"></my-head>
    <div class="shop-box">
      <div class="sleft">
        <ul>
          <van-sticky :offset-top="46">
            <van-sidebar v-model="type">
              <li v-for="(l, i) in classes" :key="i">
                <van-sidebar-item :title="l.typeName" />
              </li>
            </van-sidebar>
          </van-sticky>
        </ul>
      </div>

      <div class="sright">
        <ul v-for="(l, i) in classes" :key="i">
          <h2>{{ l.typeName }}</h2>
          <li v-for="(a, p) in classes" :key="p">
            <img :src="a.categoryLogicVOList.img" alt="" />
            <p>{{ a.categoryLogicVOList.name }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // props: {
  //   list: Array,
  // },
  data() {
    return {
      type: 0,
      classes: [],
    };
  },
  methods: {
    async getClasslist() {
      let res = await this.$ajax.getClass({
        shopId: 2233,
      });
      this.classes = res.data.vo;
    },
  },
  mounted() {
    this.getClasslist();
  },
};
</script>

<style lang="scss" scoped>
.shop {
  width: 100%;
  height: 100vh;
  background: #f4f4f4;
  .shop-box {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: space-between;
    .sleft {
      flex-shrink: 0;
      height: 100%;
    }
    .sright {
      // flex:1
      width: 300px;
    }
  }
}
</style>